<template>
  <div class="one-box">
    <div id="customerChart"></div>
  </div>
</template>
<script setup>
import { ref, onMounted, nextTick, watch } from "vue"
import { getCurrentInstance } from "vue" //访问内部组件实例
import useStore from "../../store/index.js"
const { one } = useStore()

const { appContext } = getCurrentInstance()
const { $echarts, fontSize } = appContext.config.globalProperties
onMounted(() => {
  nextTick(() => {
    initEcharts()
  })
  initOnList()
})
const initEcharts = () => {
  let myChart = $echarts.getInstanceByDom(
    document.getElementById("customerChart")
  )
  if (myChart == null) {
    // 如果不存在，就进行初始化
    myChart = $echarts.init(document.getElementById("customerChart"))
  }
  let option = {
    grid: {
      top: "20%",
      bottom: "10%",
      right: "10%",
      left: "10%"
    },
    xAxis: {
      data: NameList.value,
      axisLine: {
        lineStyle: {
          color: "#0a3e98"
        }
      },
      axisTick: {
        show: false,
        lineStyle: {
          color: "#BAE7FF"
        }
      },
      splitLine: {
        lineStyle: {
          color: "#195384",
          type: "dotted"
        }
      },
      axisLabel: {
        show: true,
        margin: 14,
        fontSize: 14,
        color: "#fff"
      }
    },
    yAxis: [
      {
        name: "",
        nameTextStyle: {
          fontSize: 11,
          color: "#BAE7FF"
        },
        splitArea: {
          show: false,
          lineStyle: {
            color: "#195384",
            type: "solid"
          }
        },
        type: "value",
        gridIndex: 0,
        minInterval: 1,
        // max: 100,
        // interval: 25,
        // splitNumber: 4,
        splitLine: {
          show: true,
          lineStyle: {
            color: "#0a3e98",
            type: "dotted"
          }
        },
        axisTick: {
          show: false
        },
        axisLine: {
          lineStyle: {
            color: "#0a3e98"
          }
        },
        axisLabel: {
          show: true,
          margin: 14,
          fontSize: 14,
          color: "#fFF"
        }
      }
    ],
    series: [
      {
        name: "项目数量",
        type: "bar",
        barWidth: 22,
        itemStyle: {
          // @ts-ignore
          normal: {
            color: $echarts.graphic.LinearGradient(1, 0, 0, 0, [
              {
                offset: 0,
                color: "#1EE7E7"
              },
              {
                offset: 1,
                color: "#1890FF"
              }
            ])
          }
        },
        data: AgeList.value,
        z: 10,
        zlevel: 0
      },
      {
        // 分隔
        type: "pictorialBar",
        itemStyle: {
          normal: {
            color: "rgba(24, 27, 36, 0.63)"
          }
        },
        symbolRepeat: "fixed",
        symbolMargin: 4,
        symbol: "rect",
        symbolClip: true,
        symbolSize: [22, 5],
        symbolPosition: "start",
        symbolOffset: [1, 1],
        data: AgeList.value,

        width: 2,
        z: 0,
        zlevel: 1
      },
      {
        name: "外框",
        type: "bar",
        barGap: "-110%", // 设置外框粗细
        barWidth: 22,
        itemStyle: {
          normal: {
            color: "transparent" // 填充色
            // barBorderRadius: 0, //圆角半径
            // label: {
            //   // 标签显示位置
            //   show: false,
            //   position: "top" // insideTop 或者横向的 insideLeft
            // }
          }
        },
        z: 0
      }
    ]
  }
  myChart.setOption(option)
}
const OnList = ref([
  {
    name: "张三",
    age: 3
  },
  {
    name: "李四",
    age: 4
  },
  {
    name: "王五",
    age: 5
  },
  {
    name: "赵六",
    age: 6
  }
])
const NameList = ref([])
const AgeList = ref([])
const initOnList = () => {
  OnList.value.forEach((item) => {
    NameList.value.push(item.name)
    AgeList.value.push(item.age)
  })
}
watch(
  () => one.shijian,
  (newValue, oldValue) => {
    // console.log(newValue, "改变后的")
    // console.log(oldValue, "改变前的")
    // console.log(OnList.value)
    one.axiosOneOnList()
    OnList.value = one.oneOnList
    // console.log(OnList.value)
    NameList.value = []
    AgeList.value = []
    initOnList()
    // console.log(NameList.value)
    // console.log(AgeList.value)
    initEcharts()
  }
)
</script>
<style scoped lang="less">
.one-box {
  width: 100%;
  height: 100%;
  background-color: pink;
  #customerChart {
    width: 100%;
    height: 100%;
  }
}
</style>
